<!--
 * @Description: 故障
 * @Author: lwx
 * @Date: 2022-12-16 09:59:42
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-25 14:26:51
-->
<template>
 <!-- 维修记录 -->
  <div class="maintain-box">
    <div v-for="(item,index) in maintainList" :key="index" class="mb-2" >
      <div class="text-overflow">
        <span class="round red"></span>
        <span>故障原因 [</span>
        <span class="ml-1" style="color:red">{{item.note}} </span>]
      </div>
      <div class="time huise ">
        {{item.start_time}}开始维修，{{item.finish_time}}
        <span v-if="item.finish_time">结束维修</span>
        <span v-else>在维修中</span>
      </div>
      <div class="result">
         <span>维修结果</span>
         <span class="huise ml-1">[ {{item.results}} ]</span>
      </div>
    </div>
    <el-empty description="暂无维修记录" :image-size="90" v-if="maintainList.length===0"></el-empty>
  </div>
</template>

<script>
export default {
  props:{
    maintainList:{
      type:Array,
      
    }
  },
}
</script>
<style lang='scss' scoped>
.maintain-box{
    width: 100%;
    height: 150px;
    background: #FAFAFA;
    padding: 10px 15px;
    font-size: 13.5px;
    overflow: hidden;
}
.text-overflow{
   width: 300px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}
.red{
    background-color: red;
}
.time{
    font-size: 12px;
    padding-left:15px;
    margin: 5px 0;
}
.result{
    padding-left: 15px
}
/deep/.el-empty{
  padding: 0;
  height: 100%;
}
/deep/.el-empty__description {
  margin-top: 0;
  p{
   font-size: 12px;
  }
}

</style>